<template>
   <div id="evaluation" class="padding-inner">
      <div class="top flex-between">
         <div class="item">
            
            <Panel panelTitle="总体评价三角">
               <div class="score-box">
              <span class="score-tit">总体评分</span> 
              <span class="score">56.6</span>
            </div>
               <div id="triangle_1" style="width: 100%;height:2.5rem;"></div>
            </Panel>
         </div>
         <div class="item">
            <Panel panelTitle="安全性评价">
               <template>
                  <el-table  :data="DataSafe" height="200" border style="width: 100%" size="mini">
                     <el-table-column prop="anquanzhibiao_uuid" label="编号">
                     </el-table-column>
                     <el-table-column prop="kpi" label="KPI">
                     </el-table-column>
                     <el-table-column prop="shuzhi" label="数值">
                     </el-table-column>
                     <el-table-column prop="koufen" label="扣分">
                     </el-table-column>
                  </el-table>
               </template>
            </Panel>
         </div>
         <div class="item">
            <Panel panelTitle="功能性评价">
               <template>
                  <el-table   :data="DataFunctional" height="200" border style="width: 100%" size="mini">
                     <el-table-column prop="gongnengzhibiao_uuid" label="编号">
                     </el-table-column>
                     <el-table-column prop="kpi" label="KPI">
                     </el-table-column>
                     <el-table-column prop="shuzhi" label="数值">
                     </el-table-column>
                     <el-table-column prop="pingfen" label="评分">
                     </el-table-column>
                  </el-table>
               </template>
            </Panel>
         </div>
         <div class="item">
            <Panel panelTitle="节能性评价">
               <template>
                  <el-table  :data="DataEnergySaving" height="200" border style="width: 100%" size="mini">
                     <el-table-column prop="jienengzhibiao_uuid" label="编号">
                     </el-table-column>
                     <el-table-column prop="kpi" label="KPI">
                     </el-table-column>
                     <el-table-column prop="shuzhi" label="数值">
                     </el-table-column>
                     <el-table-column prop="pingfen" label="评分">
                     </el-table-column>
                  </el-table>
               </template>
            </Panel>
         </div>
      </div>
      <div class="bottom flex">
         
         <div class="left">
            <Panel panelTitle="运行评价结果时间曲线">
               <div id="evaluation_curve" style="width: 100%; height: 200px;"></div>
            </Panel>
         </div>
         <div class="right">
            <Panel panelTitle="节能性评价玫瑰图">
               <div id="energy_saving" style="width: 100%; height: 200px;"></div>
            </Panel>
         </div>
      </div>
      <!-- <div>{{  this.pingjiariqi_array }}</div>
      <div>{{  this.anquanxing_array }}</div>
      <div>{{  this.gongnengxing_array }}</div>
      <div>{{  this.jienengxing_array }}</div> -->
      <!-- <button @click="show()">11111</button> -->
   </div>
</template>
  
<script>
import Panel from '@/components/base/Panel.vue';
import { getEvaluationSafe, getEvaluationFunctional, getEvaluationEnergySaving ,getEvaluationRun} from '@/api/monitoring'
import {formatDate} from '@/utils/tools'
export default ({
   name: 'Evaluation',
   components: {
      Panel
   },
   data() {
      return {
         box: [],
         // DataSafe: [],
         DataSafe:[ { "anquanzhibiao_uuid": "1", "kpi": "告警次数", "shuzhi": 2, "koufen": 10 }, { "anquanzhibiao_uuid": "2", "kpi": "严重告警次数", "shuzhi": 1, "koufen": 10 }, { "anquanzhibiao_uuid": "3", "kpi": "保护次数", "shuzhi": 0, "koufen": 0 }, { "anquanzhibiao_uuid": "4", "kpi": "紧急保护次数", "shuzhi": 0, "koufen": 0 } ],
         // DataFunctional: [],
         DataFunctional: [ { "gongnengzhibiao_uuid": "1", "kpi": "出口水温", "shuzhi": 2, "pingfen": 80 }, { "gongnengzhibiao_uuid": "2", "kpi": "分集水器压差", "shuzhi": 4, "pingfen": 80 }, { "gongnengzhibiao_uuid": "3", "kpi": "进口水温", "shuzhi": 4, "pingfen": 80 } ],
         // DataEnergySaving: [],
         DataEnergySaving: [ { "jienengzhibiao_uuid": "1", "kpi": "冷却塔支路回水温度一致性", "shuzhi": 0.5, "pingfen": 70 }, { "jienengzhibiao_uuid": "2", "kpi": "冷却塔换热效率", "shuzhi": 0.5, "pingfen": 60 }, { "jienengzhibiao_uuid": "3", "kpi": "冷却泵效率", "shuzhi": 0.5, "pingfen": 40 }, { "jienengzhibiao_uuid": "4", "kpi": "冷冻泵效率", "shuzhi": 0.5, "pingfen": 70 }, { "jienengzhibiao_uuid": "5", "kpi": "冷水机组冷凝器换热效率", "shuzhi": 0.5, "pingfen": 90 }, { "jienengzhibiao_uuid": "6", "kpi": "冷水机组蒸发器换热效率", "shuzhi": 0.5, "pingfen": 80 }, { "jienengzhibiao_uuid": "7", "kpi": "冷水机组压缩机效率", "shuzhi": 0.5, "pingfen": 30 } ],
         DataRun: [],
         //处理曲线数据
         pingjiariqi_array : [],
         anquanxing_array : [],
         gongnengxing_array :[],
         jienengxing_array : [],
         zongtipingjia_array : [ "0.80", "0.80", "0.80", "0.80", "0.80", "0.80", "0.80", "0.80", "0.80" ],
        
      }
   },
   created() {
      // this.initSafeList()
      // this.initFunctionalList()
      // this.initEnergySavingList()
      
   },
   mounted() {
      this.triangleChart()
      this.drawCurve()
      this.drawRadar()
      //
      // this.initRunList()
   },
   computed: {
    chartCurve() {
      
      return  [ "0.80", "0.80", "0.80", "0.80", "0.80", "0.80", "0.80", "0.80", "0.80" ]
    }
  },
   methods: {
      show(){
         console.log(this.pingjiariqi_array)
      },
      //安全性评价
      // async initSafeList() {
      //    const { data } = await getEvaluationSafe()
      //    this.DataSafe = data.data
         
      // },
      //功能性评价
      // async initFunctionalList() {
      //    const { data } = await getEvaluationFunctional()
      //    this.DataFunctional = data.data
      // },
      //节能性评价
      // async initEnergySavingList() {
      //    const { data } = await getEvaluationEnergySaving()
      //    this.DataEnergySaving = data.data
      // },
      //运行评价
      // async initRunList() {
      //    const { data } = await getEvaluationRun()
         
      //    // this.DataRun = res.data
      //    // this.DataRun.forEach(item => {
      //    //       this.pingjiariqi_array.push(item.pingjiariqi);
      //    //       this.anquanxing_array.push(item.anquanxing);
      //    //       this.gongnengxing_array.push(item.gongnengxing);
      //    //       this.jienengxing_array.push(item.jienengxing);
      //    //       this.zongtipingjia_array.push(item.zongtipingjia);
      //    // });
      //    this.drawCurve(data.data)
      //    console.log( data.data)
      // },
      
     
      triangleChart() {
         var myChart = this.$echarts.init(document.getElementById('triangle_1'));
         // 指定图表的配置项和数据
         var option = {
            legend: {
               top: 0,
               left: 4,
               data: ['总评分'],
            },
            radar: {
               // shape: 'circle',
               indicator: [
                  { name: '节能指数', max: 100 },
                  { name: '安全指数', max: 100 },
                  { name: '功能指数', max: 100 },
               ],
               radius: 40,//缩放
               center: ['50%', '60%'],//位置
            },
            series: [
               {
                  name: 'Budget vs spending',
                  type: 'radar',
                  itemStyle: {
                     color: 'red',
                  },

                  data: [
                     {
                        value: [40, 70, 60],
                        name: '总评分',
                        label: {
                           show: true,

                           color: '#e3f2fe',
                           backgroundColor: '#0e5bd3b3',
                           borderRadius: 3,
                           padding: [3, 5],
                           formatter: function (params) {
                              return params.value;
                           },
                        },

                     },
                  ]
               }
            ]
         };
         myChart.setOption(option);
      },
      drawCurve(dataCurve) {
         // 基于准备好的dom，初始化echarts实例
         let myChart = this.$echarts.init(document.getElementById('evaluation_curve'))
         
        
          
         var option = {
                title: {
                    text: '',
                    color: '#e3f2fefff'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#3b72ee'
                        }
                    }
                },
                legend: {
                    data: ['安全性', '功能性', '节能性', '总体评价']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        color: '#e3f2fe',
                        data: [
                            '2023/06/09',
                            '2023/06/10',
                            '2023/06/11',
                            '2023/06/12',
                            '2023/06/13',
                            '2023/06/14',
                            '2023/06/15',
                            '2023/06/16',
                            '2023/06/17',
                            '2023/06/18',
                            '2023/06/19',
                            '2023/06/20',
                            '2023/06/21',
                            '2023/06/22',
                            '2023/06/23',
                            '2023/06/24',
                            '2023/06/25',
                            '2023/06/26',
                            '2023/06/27',
                            '2023/06/28',
                            '2023/06/29',
                            '2023/06/30',
                            '2023/06/31',
                            '2023/06/32',
                            '2023/06/33',
                            '2023/06/34',
                            '2023/06/35',
                            '2023/06/36',
                            '2023/06/37',
                            '2023/06/38']
                    }
                ],
                yAxis: {
                            type: 'value'
                        },
                    
                series: [
                    {
                        name: '安全性',
                        type: 'line',
                       
                        data: [  191, 234, 290, 330, 310,220, 182, 191, 220, 182, 191, 234, 290, 330, 310,220, 260,220, 182, 191, 234, 290, 330, 310,220, 182, 191,]
                    },
                    {
                        name: '功能性',
                        type: 'line',
                        
                        data: [330, 310,220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 191, 234, 290, 330, 310,220, 182, 191,  234, 290, 330, 310,220]
                    },
                    {
                        name: '节能性',
                        type: 'line',
                        
                        data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '总体评价',
                        type: 'line',
                        
                        data: [182, 191, 234, 290, 330, 310,220,330, 310,220, 182, 191, 234, 290, 330, 310,220, 191, 234, 290, 330, 310,220, 182, 191]
                    },



                ]
            };

        // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
      },
      drawRadar() {
         // 基于准备好的dom，初始化echarts实例
         let myChart = this.$echarts.init(document.getElementById('energy_saving'))

         var option = {
            title: {
               // text: 'Radar'
            },
            tooltip: {
               trigger: 'axis'
            },
            legend: {
               left: 0,
               data: [
                  'A Software',
               ]
            },
            radar: [

               {
                  indicator: (function () {
                     var res = [];
                     for (var i = 1; i <= 12; i++) {
                        res.push({ text: i + '月', max: 100 });
                     }
                     return res;
                  })(),
                  center: ['50%', '50%'],
                  radius: 50
               }
            ],
            series: [
               {
                  type: 'radar',
                  tooltip: {
                     trigger: 'item'
                  },
                  areaStyle: {},
                  data: [
                     {
                        value: [100, 50, 60, 70, 80,40],
                        name: 'A Software'
                     }
                  ]
               },

            ]
         };

         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
      }
   }
})
</script>
  
<style scoped lang="less" >
#evaluation {
   .top {
      .item {
         // background-color: pink;
         width: 24%;
         position: relative;
         .score-box{
          color: #10a7ff;
          position: absolute;
          left: 15px;
          top: 84px;
          .score-tit{
            font-size: 0.25rem;
            padding-right: 0.1rem;
          }
          .score{
            color: #b97119;
            font-size: 0.2rem;
          }
        }
      }
   }

   .bottom {
      margin-top: 0.2rem;
      .left {
         width: 74.7%;
         margin-right: 0.2rem;
      }

      .right {
         width:24%;
      }
   }
}
</style>